<template>
	<view class="content">
		<view :class="['search_box',scrollTop > 200 ? 'search_display' : '']">
			<view class="relative">
				<input type="text" class="search_input" placeholder="输入搜索关健词..."/>
				<button type="submit" class="searchicon"><view class="coolc icon-search"></view></button>
			</view>
		</view>
		
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}">

				<navigator url="/pages/goods/class" class="coolc leftclass icon-fenlei"></navigator>
				<view class="logo"></view>
				<view class="coolc qrcode icon-scan"></view>

				
				<swiper class="carousel" circular :autoplay="true" :interval="4000" @change="swiperChange">
					<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage(item.id)">
						<image :src="item.src" />
					</swiper-item>
				</swiper>
				<!-- 自定义swiper指示器 -->
				<view class="swiper-dots">
					<text class="num">{{swiperCurrent+1}}</text>
					<text class="sign">/</text>
					<text class="num">{{swiperLength}}</text>
				</view>
			</view>
		</view>
		
		<view class="index_icon">
			<navigator url="/pages/goods/list" class="li"><i class="coolc circle-pink icon-meizhuang"></i><view class="text">美妆</view></navigator>
			<navigator url="/pages/goods/list" class="li"><i class="coolc circle-cyan icon-xiexiangbao"></i><view class="text">箱包</view></navigator>
			<navigator url="/pages/goods/list" class="li"><i class="coolc circle-orange icon-nanzhuang"></i><view class="text">服装</view></navigator>
			<navigator url="/pages/goods/list" class="li"><i class="coolc circle-green icon-peishi"></i><view class="text">配饰</view></navigator>
			<navigator url="/pages/goods/list" class="li"><i class="coolc circle-red icon-dianqi"></i><view class="text">电器</view></navigator>
			
			<navigator url="/pages/goods/brand" class="li"><i class="coolc circle-tender-green icon-quanwei"></i><view class="text">品牌</view></navigator>
			<navigator url="/pages/video/index" class="li"><i class="coolc circle-black icon-shipin"></i><view class="text">视频导购</view></navigator>
			<navigator url="/pages/goods/direct" class="li"><i class="coolc circle-blue icon-shangpin"></i><view class="text">商场同款</view></navigator>
			<navigator url="/pages/goods/ranking" class="li"><i class="coolc circle-violet icon-xunzhang"></i><view class="text">排行榜</view></navigator>
			<navigator url="/pages/goods/class" class="li"><i class="coolc circle-cyan icon-fenlei"></i><view class="text">分类</view></navigator>
		</view>
		<navigator url="/pages/activity/list" class="indexad_1"><img src="~@/static/ad1.jpg"></navigator>
        <view class="swiperbox_bg">
			<scroll-view id="tab-bar" class="swiperbox" scroll-x>
				<view @click="tapTab(0)" :class="['lis',tabIndex == 0 ? 'active' : '']">大牌抢购</view>
				<view @click="tapTab(1)" :class="['lis',tabIndex == 1 ? 'active' : '']">好货直供</view>
				<view @click="tapTab(2)" :class="['lis',tabIndex == 2 ? 'active' : '']">新品上架</view>
				<view @click="tapTab(3)" :class="['lis',tabIndex == 3 ? 'active' : '']">视频导购</view>
			</scroll-view>
			<swiper class="swipercentent swiperhd" :autoplay="false" :current="tabIndex" @change="tapTab2">
				<swiper-item>
					<view class="activity_li">
						<view class="banner_img"><img class="banner_img" src="~@/static/banner_1.jpg"></view>
						<view class="activity_info_box">
							<view class="logos"><img src="~@/static/baner_logo_3.jpg"></view>
							<view class="name_text">Dior迪奥专场</view>
							<view class="sale"><b>2.3</b><span>折/起</span></view>
						</view>
					</view>
					<view class="activity_li">
						<view class="banner_img"><img class="banner_img" src="~@/static/banner_2.jpg"></view>
						<view class="activity_info_box">
							<view class="logos"><img src="~@/static/baner_logo_2.jpg"></view>
							<view class="name_text">Dior迪奥专场</view>
							<view class="sale"><b>2.3</b><span>折/起</span></view>
						</view>
					</view>
					<view class="more_block_btn"><span>更多抢购</span></view>
				</swiper-item>
				<swiper-item>
					<view class="goods_li" @click="goDetailPage('goods/product')">
						<view class="goods_img"><img src="~@/static/por5.jpg"></view>
						<p class="namebox">DIOR/迪奥 男士桀骜护肤三件套装(洁面125ML 爽肤水100ML 乳液50ML)</p>
						<view class="price_box">
							<b>¥20750.00</b>
							<span>¥20850.00</span>
						</view>
					</view>
					<view class="goods_li" @click="goDetailPage('goods/product')">
						<view class="goods_img"><img src="~@/static/por5.jpg"></view>
						<p class="namebox">DIOR/迪奥 男士桀骜护肤三件套装(洁面125ML 爽肤水100ML 乳液50ML)</p>
						<view class="price_box">
							<b>¥20750.00</b>
							<span>¥20850.00</span>
						</view>
					</view>
					<view class="more_block_btn"><span>更多产品</span></view>
				</swiper-item>
				<swiper-item>
					<view class="goods_li" @click="goDetailPage('goods/product')">
						<view class="goods_img"><img src="~@/static/por6.jpg"></view>
						<p class="namebox">DIOR/迪奥 男士桀骜护肤三件套装(洁面125ML 爽肤水100ML 乳液50ML)</p>
						<view class="price_box">
							<b>¥20750.00</b>
							<span>¥20800.00</span>
						</view>
					</view>
					<view class="goods_li" @click="goDetailPage('goods/product')">
						<view class="goods_img"><img src="~@/static/por6.jpg"></view>
						<p class="namebox">DIOR/迪奥 男士桀骜护肤三件套装(洁面125ML 爽肤水100ML 乳液50ML)</p>
						<view class="price_box">
							<b>¥20750.00</b>
							<span>¥20800.00</span>
						</view>
					</view>
					<view class="more_block_btn"><span>更多产品</span></view>
				</swiper-item>
				<swiper-item>
					<view class="video_li" @click="goDetailPage('video/detail')">
						<view class="video_img"><img src="~@/static/s1.jpg"><i class="coolc">&#xe635;</i></view>
						<p class="namebox">DIOR/迪奥 男士桀骜护肤三件套装</p>
					</view>
					<view class="video_li" @click="goDetailPage('video/detail')">
						<view class="video_img"><img src="~@/static/s2.jpg"><i class="coolc">&#xe635;</i></view>
						<p class="namebox">DIOR/迪奥 男士桀骜护肤三件套装</p>
					</view>
					<view class="video_li" @click="goDetailPage('video/detail')">
						<view class="video_img"><img src="~@/static/s1.jpg"><i class="coolc">&#xe635;</i></view>
						<p class="namebox">DIOR/迪奥 男士桀骜护肤三件套装</p>
					</view>
					<view class="more_block_btn"><span>更多视频</span></view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="big_deal">
			<view class="title">大牌专场</view>
			<view class="big_deal_li">
				<view class="big_deal_img"><img src="~@/static/bg_s1.jpg"></view>
				<view class="sale_info">
					<b class="big_name">限时24小时全场直降-GUCCI香水专场</b>
					<p class="salebv"><em>0.5</em>折/起</p>
					<time><span class="coolc">&#xe60c;</span><u>剩1天</u></time>
				</view>
			</view>
			<view class="big_deal_li">
				<view class="big_deal_img"><img src="~@/static/bg_s2.jpg"></view>
				<view class="sale_info">
					<b class="big_name">限时24小时全场直降-GUCCI香水专场</b>
					<p class="salebv"><em>0.5</em>折/起</p>
					<time><span class="coolc">&#xe60c;</span><u>剩1天</u></time>
				</view>
			</view>
			<view class="more_block_btn"><span>更多活动</span></view>
		</view>
		
        <view class="guess_bg">
			<view class="title">猜您喜欢</view>
			<view class="product-list">
				<goods-Case v-for="(item, index) in goodsList[0].list" :key="index" v-bind:item="item"></goods-Case>
			</view>
		</view>
		
		<!-- 返回顶部 -->
		<view :class="['gotop',scrollTop > 500 ? 'gotops' : '']" @click="onGotoTop"><img src="~@/static/img/icon/gotop.png"></view>
	</view>
</template>
<style lang="scss">
/* 头部 轮播图 */
.carousel-section {
	position: relative; height:470upx;
	background:#ffffff; padding-top:100upx;

	.titleNview-background {
		position:absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 400upx;
		transition: .4s;
	}
	
	.leftclass { width:100upx; height:100upx; line-height:100upx; font-size:50upx; color:#ffffff; position:absolute; z-index:99; left:0px; top:0px; text-align:center; }
	.qrcode { width:100upx; height:100upx; line-height:100upx; font-size:42upx; color:#ffffff; position:absolute; z-index:99; right:0px; top:0px; text-align:center; }
	.logo { width:100%; height:100upx; margin:0 auto; background:url(~@/static/logo.png) no-repeat center; position:absolute; right:0px; top:0px; right:0px; background-size:auto 50%; }
}
.carousel {
	width: 100%;
	height:470upx; padding-top:100upx;

	.carousel-item {
		width: 100%;
		height: 100%;
		padding: 0 28upx;
		overflow: hidden;
	}

	image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}
}
.swiper-dots {
	display: flex;
	position: absolute;
	left: 60upx;
	bottom:-45upx;
	width: 72upx;
	height: 36upx;
	background-image: url();
	background-size: 100% 100%;

	.num {
		width: 36upx;
		height: 36upx;
		border-radius: 50px;
		font-size: 24upx;
		color: #fff;
		text-align: center;
		line-height: 36upx;
	}

	.sign {
		position: absolute;
		top: 0;
		left: 50%;
		line-height: 36upx;
		font-size: 12upx;
		color: #fff;
		transform: translateX(-50%);
	}
}

.swiperitem { height:424upx; }
.swiperhd { height:376upx; }
.search_box { width:100%; height:84upx; padding-top:14upx; top:0px; z-index:999; background:#8c0027; position:fixed; display:none; }
.search_box .search_input { width:96%; height:52.5upx; background:#ffffff; margin:0 auto; text-indent:20upx; }
.search_box .searchicon  { width:52.5upx; height:52.5upx; border:1px solid #ffffff!important; background:#ffffff!important; -webkit-appearance:none; position:absolute; right:2%; top:0px; padding:0px; }
.search_box .searchicon:after { border:0px; }
.search_box .searchicon .coolc { width:52.5upx; height:52.5upx; line-height:52.5upx; font-size:26upx; color:#999999; text-align:center; }
.search_display { display:block; }
.page-section .swiper-item img { width:100%; }
.index_icon { width:100%; height:auto; display:table; background:#fff; padding:30upx 0 5upx 0; }
.index_icon .li { width:20%; height:auto; display:block; float:left; }
.index_icon .li .coolc { width:88upx; height:88upx; line-height:88upx; font-size:46upx; text-align:center; border-radius:38upx; margin:0 auto; }
.index_icon .li .text { width:100%; height:66upx; line-height:66upx; text-align:center; font-size:24upx; color:#999999; display:block; }
.swiperbox_bg { width:100%; height:auto; display:table; background:#ffffff; padding:0 1%; } 
.swiperbox_bg .swiperbox { width:100%; height:auto; display:table; padding:20upx 5%; }
.swiperbox_bg .swiperbox .lis { width:25%; height:50upx; line-height:50upx; border-radius:50upx; font-size:24upx; color:#999999; display:block; float:left; text-align:center; }
.swiperbox_bg .swiperbox .active { background:#8c0027; color:#ffffff; }
.activity_li { width:48%; height:auto; display:block; float:left; margin:0 1%; }
.activity_li .banner_img { width:354upx; height:216.55upx; margin:0px; }
.activity_li .banner_img img { width:354upx; height:216.55upx; }
.activity_li .activity_info_box { width:354upx; height:60upx; border:1px solid #eeeeee; border-top:0px; position:relative; display:block; margin-top:0px; padding:0px; }
.activity_li .activity_info_box .logos { width:70upx; height:70upx; background:#ffffff; overflow:hidden; border:1px solid #eee; left:12upx; top:-35upx; position:absolute; border-radius:80upx; }
.activity_li .activity_info_box .logos img { height:70upx; margin-left:-16upx; }
.activity_li .activity_info_box .name_text { height:60upx; line-height:60upx; font-size:18upx; padding-left:92upx; }
.activity_li .activity_info_box .sale { height:60upx; line-height:60upx; position:absolute; right:12upx; top:0px; }
.activity_li .activity_info_box .sale span { font-size:18upx; color:#999999; }
.activity_li .activity_info_box .sale b { font-size:28upx; color:#e32e37; padding-right:3px; }
.goods_li { width:348upx; height:auto; display:block; float:left; margin:0 1%; border:1px solid #eeeeee; }
.goods_li .goods_img { width:348upx; height:200upx; text-align:center; }
.goods_li .goods_img img { width:200upx; height:200upx; margin:0 auto; }
.goods_li .namebox { width:318upx; height:36upx; line-height:36upx; padding:0 15upx; display:block; font-size:22upx; color:#999999; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.goods_li .price_box { width:318upx; height:40upx; line-height:32upx; padding:0 15upx; }
.goods_li .price_box b { height:40upx; display:block; float:left; font-size:24upx; color:#e32e37; padding-right:4px; }
.goods_li .price_box span { height:40upx; display:block; float:left; font-size:18upx; color:#999999; }
.video_li { width:237upx; height:auto; display:table; float:left; margin:0 4.5upx; }
.video_li .video_img { width:237upx; height:237upx; position:relative; }
.video_li .video_img i { line-height:237upx; font-size:70upx; position:absolute; text-align:center; left:0px; top:0px; right:0px; bottom:0px; background:rgba(0,0,0,0.5); color:#fff; }
.video_li .video_img img { width:237upx; height:237upx; }
.video_li .namebox { width:237upx; height:50upx; line-height:40upx; color:#666666; font-size:18upx; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.more_block_btn { width:100%; height:80upx; clear:both; padding-top:18upx; }
.more_block_btn span { width:170upx; height:56upx; line-height:56upx; color:#868686; display:block; text-align:center; border-radius:56upx; font-size:22upx; margin:0 auto; border:1px solid #dedede; }

.big_deal { width:100%; height:auto; display:block; padding:20upx 0; }
.big_deal .title { width:100%; height:40upx; line-height:40upx; font-size:36upx; text-align:center; }
.big_deal .big_deal_li { width:96%; margin:20upx auto 0 auto; background:#ffffff; border-radius:10px; overflow:hidden; }
.big_deal .big_deal_li .big_deal_img { width:720upx; height:356.94upx; overflow:hidden; }
.big_deal .big_deal_li .big_deal_img img { width:720upx; height:356.94upx; }
.big_deal .big_deal_li .sale_info { width:100%; position:relative; }
.big_deal .big_deal_li .sale_info .big_name { width:70%; height:50upx; line-height:60upx; padding-left:20upx; display:block; font-size:26upx; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.big_deal .big_deal_li .sale_info .salebv { width:70%; height:60upx; line-height:40upx; color:#666666; font-size:20upx; padding-left:20upx; }
.big_deal .big_deal_li .sale_info .salebv em { font-weight:bold; font-size:34upx; padding-right:5px; font-style:normal; color:#e32e37; }
.big_deal .big_deal_li .sale_info time { position:absolute; right:20upx; top:20upx; color:#e32e37; }
.big_deal .big_deal_li .sale_info time span { line-height:30upx; display:block; float:left; font-size:24upx; padding-right:5px; }
.big_deal .big_deal_li .sale_info time u { line-height:28upx; display:block; float:left; text-decoration:none; font-size:24upx; }

.guess_bg { width:100%; height:auto; display:table; background:#ffffff; padding-top:30upx; }
.guess_bg .title { height:70upx; line-height:40upx; font-size:36upx; text-align:center; position:relative; }
.guess_bg .title:before { width:144upx; height:2px; background:#000000; content:""; position:absolute; left:50%; bottom:0px; margin-left:-72upx; }
</style>

<script>
import goodsCase from '@/components/goods-case';
import {  
	mapState 
} from 'vuex';  
export default {
	components: {
		goodsCase,
	},
    data() {
        return {
			titleNViewBackground: '',
			swiperCurrent: 0,
			swiperLength: 0,
			carouselList: [],
			goodsList: [{}, {}],
			
            title: 'product-list',
			productList: [],
            renderImage: false,
			scrollTop:0,
			tabIndex: 0,
        }
    },
    onLoad() {
        this.loadData();
        setTimeout(()=> {
            this.renderImage = true;
        }, 300);
    },
	onPageScroll(res){
		this.scrollTop = res.scrollTop;
	},
	methods:{
		async tapTab(index) {
			this.tabIndex = index;
		},
		async tapTab2(e){
			this.tabIndex = e.detail.current;
		},
		onGotoTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},	
		goDetailPage(e) {
			if (typeof e === 'string') {
				uni.navigateTo({
					url: '/pages/' + e 
				})
			}else{
				uni.navigateTo({
					url:e.url
				})
			}
		},
		async loadData() {
			let carouselList = await this.$api.json('carouselList');
			this.titleNViewBackground = carouselList[0].background;
			this.swiperLength = carouselList.length;
			this.carouselList = carouselList;
			
			let goodsList = await this.$api.json('goodsList');
			this.goodsList = goodsList;
		},
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
			this.titleNViewBackground = this.carouselList[index].background;
		}
	}
}
</script>